<style lang="less" scoped>
    .stock {
        width: 100%;
        height: auto;
        overflow: hidden;
        text-align: center;
        padding: 8px;
        display: flex;
        .left{
            flex-grow: 1;
        }
        .right{
            min-width: 300px;
            width: 300px;
            margin-left: 10px;
            .row{
                margin-top: 5px;
                display: flex;
                align-items: flex-start;
                .label{
                    width: 90px;
                    min-width: 90px;
                    text-align: right;
                }
                .value{
                    text-align: left;
                }
            }
        }
    }
</style>
<template>
    <div class="stock">
        <div class="left">
            <card-table
                cardtitle="库存列表"
                addbuttext="新增出入库"
                :columns="columns"
                :selectList="selectList"
                :defaultSelete="defaultSelete"
                :searchForm="searchForm"
                :formItem="formItem"
                @add="add"
                @refresh="refresh"
                @on-current-change="onCurrentChange"
                :data="data">
                <!--<Button slot="button" type="default"  @click="storageall">出入库记录</Button>-->
            </card-table>
        </div>
        <div class="right">
            <my-card cardtitle="出入库记录" :showright="false"  icon="compose" cardbtn="详情" @cardrightclick="storageclick">
                <ul v-if="current" style="text-align: left">
                    <li v-for="(item, index) in storage" :key="index">
                        <p>物料编号：{{ item.nub }}</p>
                        <p>时间：{{ item.time }}</p>
                        <p>操作类型：{{ item.flag | storagetype }}</p>
                        <p>数量：{{ item.number }}</p>
                        <div style="height: 1px;width: 100%;background-color: #000;margin: 5px 0;"></div>
                    </li>
                </ul>
            </my-card>
        </div>
        <add-storage v-model="addstorage" :nubselect="nubselect" @storageUpdate="storageUpdate"></add-storage>
    </div>
</template>
<script>
    import CardTable from '../components/cardTable.vue'
    import MyCard from '../components/myCard.vue'
    import stockdata from './stockdata.js'
    import AddStorage from './addstorage.vue'
    export default {
        name: 'stock',
        data () {
            return {
                role: false,
                addstorage: false,
                nubselect: [],
                columns: [
                    {
                        title: '编号',
                        key: 'nub'
                    },
                    {
                        title: '物料名称',
                        key: 'name'
                    },
                    {
                        title: '库存',
                        key: 'stock',
                        render: (h, params) => {
                            return h('span', params.row.stock + params.row.unit + '/' + params.row.number + params.row.unit)
                        }
                    },
                    {
                        title: '类型',
                        key: 'type',
                        render: (h, params) => {
                            let p = params.row.type == 'product' ? '产品' : '物料'
                            return ('span', p)
                        }
                    },
                    {
                        title: '预订客户',
                        key: 'customer',
                        render: (h, params) => {
                            return h('Poptip', {
                                props: {
                                    trigger: 'hover',
                                    placement: "left"
                                }
                            }, [
                                h('Tag', params.row.remark),
                                h('div', {
                                    slot: 'content'
                                }, params.row.customer)
                            ])
                        }
                    },
                    {
                        title: '备注',
                        key: 'remark',
                        render: (h, params) => {
                            return h('Poptip', {
                                props: {
                                    trigger: 'hover',
                                    placement: "left"
                                }
                            }, [
                                h('Tag', params.row.remark),
                                h('div', {
                                    slot: 'content'
                                }, params.row.remark)
                            ])
                        }
                    },
                    {
                        title: '操作',
                        render: (h, params) => {
                            return h('div', {
                                style: {
                                    display: 'flex',
                                    justifyContent: 'center'
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'text'
                                    },
                                    on: {
                                        'click': () => {
                                            let test = {
                                                name: '出入库记录',
                                                id: 'onestorage',
                                                type: true,
                                                url: '/main/onestorage/' + params.row.id + '/type/' + params.row.type
                                            }
                                            this.util.switchHeadTag(this.$parent, test, this.$store.state.tagdata)
                                        }
                                    }
                                }, '详情')
                            ]);
                        }
                    }
                ],  //  表格列
                data: [],  //  表格数据
                storage: [],
                selectList: [
                    {
                        label: '编号',
                        value: 'nub'
                    },
                    {
                        label: '名称',
                        value: 'name'
                    },
                    {
                        label: '单位',
                        value: 'unit'
                    },
                    {
                        label: '类型',
                        value: 'type'
                    },
                    {
                        label: '备注',
                        value: 'remark'
                    }
                ],  //  搜索下拉列表
                defaultSelete: 'nub',  //  搜索下拉列表默认值
                searchForm: {
                    'nub': '',
                    'name': '',
                    'unit': '',
                    'type': '',
                    'remark': ''
                },  //  表单初始值
                formItem: [
                    {
                        label: '编号',
                        key: 'nub',
                        placeholder: '请输入物料编号'
                    },
                    {
                        label: '名称',
                        key: 'name',
                        placeholder: '输入物料名称'
                    },
                    {
                        label: '单位',
                        key: 'unit',
                        placeholder: '输入物料单位'
                    },
                    {
                        label: '类型',
                        key: 'type',
                        placeholder: '输入物料类型'
                    }
                ],  //  搜索表单item
                current: null
            }
        },
        watch: {
            '$store.state.role': {
                handler: function (val, oldVal) {
                    this.role = this._.find(val, function(chr) {
                        return chr == '61'
                    }) ? true : false
                },
                deep: true
            }
        },
        filters: {
            storagetype: function (value) {
                switch (value){
                    case 1:
                        return '入库'
                    case 2:
                        return '出库'
                }
            },
            workorderstate: function (value) {
                switch (value){
                    case '1':
                        return '待生产'
                    case '2':
                        return '未生产'
                    case '3':
                        return '已生产'
                }
            }
        },
        methods: {
            add () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                this.addstorage = true
            },
            storageUpdate (data) {
                /*if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }*/
                this.addstorage = false
                this.data = data.stock
                this.storage = data.stockDetails
            },
            refresh () {
                this.http.getAllStock(this, {})
            },
            onCurrentChange (current) {
                console.log(current)
                this.current = current
            },
            storageall () {
                let test = {
                    name: '出入库详情',
                    id: 'storage',
                    type: true,
                    url: '/main/storage/all'
                }
                this.util.switchHeadTag(this.$parent, test, this.$store.state.tagdata)
            },
            storageclick () { //  出入库详情按钮
                let test = {
                    name: '出入库详情',
                    id: 'storage',
                    type: true,
                    url: '/main/storage/' + this.current.nub
                }
                this.util.switchHeadTag(this.$parent, test, this.$store.state.tagdata)
            },
            gdclick () { //  工单列表查看按钮
                console.log('工单列表查看')
            }
        },
        components: {
            CardTable,
            MyCard,
            AddStorage
        },
        mounted: function () {
            this.role = this._.find(this.$store.state.role, function(chr) {
                return chr == '61'
            }) ? true : false
            this.http.getAllStock(this, {})
        }
    };
</script>
